<template>
  <div v-cloak>
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }" v-cloak>
      <div>
        <span>设备所在辖区</span>
        <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="main_r" :style="{ minHeight: transferHeight.contentH + 'px' }">
      <!-- Echarts 图标 -->
      <div class="t">
        <el-row class="t_container" style="height: 100%">
          <el-col :span="12">
            <!-- <div v-loading="pieFlag" v-if="pieFlag" style="height:100%"></div> -->
            <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
            <lxzk-pie v-else :pieData="echartData" />
          </el-col>
          <el-col :span="12">
            <!-- <div v-loading="barFlag" v-if="barFlag" style="height:100%"></div> -->
            <echarts-load v-if="barFlag || reload_bar" :chartFlag="barFlag" :reload="reload_bar" @refreshF="refreshBar" />
            <lxzk-bar v-else :barData="barData" />
          </el-col>
        </el-row>
      </div>
      <div class="b">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
          <el-form-item label="设备状态:">
            <el-select v-model="searchCriteria.typeVal" class="inputWidth" clearable placeholder="请选择">
              <el-option label="录像正常" :value="0"></el-option>
              <el-option label="录像中断" :value="1"></el-option>
              <el-option label="录像文件丢失" :value="2"></el-option>
              <el-option label="未录像计划" :value="3"></el-option>
            </el-select>
            <!-- <el-select
              v-model="searchCriteria.typeVal"
              class="inputWidth"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in zicanOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item>
            <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          ref="multipleTable"
          :data="tableData"
          v-if="tableData"
          style="width: 100%"
          border
          highlight-current-row
          stripe
          @sort-change="sortthiscolumn"
          v-loading="tableLoad"
          :default-sort="{ prop: 'xgsj', order: 'descending' }"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="zcmc" label="设备名称" sortable="custom" :show-overflow-tooltip="true" min-width="150">
            <template slot-scope="scope">
              <!-- 0 正常  1-录像中断(感叹号)  2文件丢失(xx) -->
              <svg class="iconfont" aria-hidden="true">
                <use :xlink:href="`#${icons[scope.row.lxzt].icon}`" style="font-size: 50px" />
              </svg>
              <span v-html="getzcmc(scope.row)" @click="findRealPage(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="zclxmc" label="设备类型" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-html="getsblx(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="安装地址" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.zcsfmc + scope.row.zccsmc + scope.row.zcqxmc + scope.row.zcjdmc + scope.row.xxdz }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zcip" label="设备IP" min-width="120">
            <template slot-scope="scope">{{ scope.row.zcip }}</template>
          </el-table-column>
          <el-table-column prop="ppmc" label="品牌" min-width="80">
            <template slot-scope="scope">{{ scope.row.ppmc }}</template>
          </el-table-column>
          <el-table-column prop="zcxh" label="型号" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.zcxh }}</template>
          </el-table-column>
          <el-table-column label="检测结果" min-width="310">
            <!-- <el-table-column label="检测结果" min-width="300"> -->
            <template slot-scope="scope">
              <ul class="jcjg" v-show="scope.row.datesign !== '' && scope.row.jsonstr !== ''" @click="findRealPage(scope.row)" style="cursor: pointer">
                <li
                  :key="index"
                  class="jcjgItem"
                  v-for="(item, index) in scope.row.jcjgList"
                  :index="index"
                  :style="{
                    width: item.width,
                    left: item.left,
                  }"
                ></li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column label="未录像时长" min-width="120">
            <template slot-scope="scope">
              <span class="f_F56C6C">{{ scope.row.differ | dateFormat3 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="NVR序列号" min-width="150">
            <template slot-scope="scope">{{ scope.row.nvrserialnumber }}</template>
          </el-table-column>
          <el-table-column label="NVR IP" min-width="120">
            <template slot-scope="scope">{{ scope.row.nvrip }}</template>
          </el-table-column>
          <el-table-column label="摄像头通道号" min-width="120">
            <template slot-scope="scope">{{ scope.row.channelid }}</template>
          </el-table-column>
          <el-table-column label="宿主" min-width="98">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.szs" :key="index">
                <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                  <div slot="content">{{ item.SZMC }}</div>
                  <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                    <!-- 0运维主机 1卡口 2电警 -->
                    <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                  </svg>
                </el-tooltip>
                <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <!-- 0运维主机 1卡口 2电警 -->
                  <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
                </svg>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="xgsj" label="巡检时间" sortable="custom" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.xgsj | dateFormat }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="gdzt" label="工单状态" min-width="120">
            <template slot-scope="scope">
              <span :class="[`type${scope.row.gdzt}`, 'type']">{{ type[scope.row.gdzt] }}</span>
            </template>
          </el-table-column>-->
          <el-table-column fixed="right" label="操作" min-width="195" align="right">
            <template slot-scope="scope">
              <div class="operations">
                <!-- 不可以点击加上 noAction这个类名 -->
                <el-button type="text" @click="findRealTime(scope.row, 1)" :disabled="!scope.row.zcip || quanxianBtns.btn1 ? false : true">手动巡检</el-button>
                <span class="operation"></span>
                <el-link
                  :disabled="scope.row.zcip !== '' && scope.row.zcip !== null ? false : true"
                  :type="scope.row.zcip !== '' && scope.row.zcip !== null ? 'primary' : 'info'"
                  :underline="false"
                  :href="'http://' + scope.row.zcip"
                  target="_blank"
                  >远程控制</el-link
                >
                <span class="operation"></span>
                <el-button type="text" @click="showPingOk(scope.row)" :disabled="scope.row.zcip !== '' && scope.row.zcip !== null ? false : true">ping</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="page-row">
          <el-col :span="12">
            <div class="bigBOx btnBefore">
              <div class="imgBox">
                <!-- scope.row.lxzt === 0 ? 'el-icon-mygenerated' : scope.row.lxzt === 1 ? 'el-icon-mynot_generated' : 'el-icon-mylose'}`" style="font-size: 50px" /> -->
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mygenerated" />
                </svg>
                <span>录像正常</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mynot_generated" />
                </svg>
                <span>录像异常</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-myVideo_loss" />
                </svg>
                <span>录像文件丢失</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mylose" />
                </svg>
                <span>未录像计划</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_0" />
                </svg>
                <span>运维主机</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_1" />
                </svg>
                <span>卡口</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_2" />
                </svg>
                <span>电子警察</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12" style="height: 47px; display: table">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 巡检详情 -->
    <el-dialog title="录像状况" :visible.sync="dialogTableVisible" class="loading" width="1080px" @close="dialogClose">
      <el-tabs class="noScorllFixed" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="录像巡检详情" name="videoDetails">
          <video-details :detailsDate="detailsDate" />
        </el-tab-pane>
        <el-tab-pane label="录像巡检历史" name="videoHistory">
          <video-history :dataList="historyDate" ref="historyDatePage" />
        </el-tab-pane>
      </el-tabs>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>-->
    </el-dialog>
    <el-dialog title="提示" :visible.sync="xjDialogVisible" width="430px" :before-close="handleClose">
      <div>{{ xjMessage }}</div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="xjDialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="xjDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import lxzkPie from '@/components/Echarts/lxzkPie'
import lxzkBar from '@/components/Echarts/lxzkBar'
import videoDetails from '@/components/videotape/videoDetails'
import videoHistory from '@/components/videotape/videoHistory'
import { getUrl } from '@/utils/getUrl.js'
import { xunJian } from '@/utils/allUrl'
// import { endLoading } from '@/utils/loading.js'
import Ping from '../../components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import { jsonstrF, fun_date, getJc } from '@/assets/js/videoTab.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  components: { lxzkPie, lxzkBar, videoDetails, videoHistory, Ping, treesBox, echartsLoad },
  data() {
    return {
      icons: [
        {
          name: '录像正常',
          icon: 'el-icon-mygenerated',
        },
        {
          name: '录像异常',
          icon: 'el-icon-mynot_generated',
        },
        {
          name: '录像文件丢失',
          icon: 'el-icon-myVideo_loss',
        },
        {
          name: '未录像计划',
          icon: 'el-icon-mylose',
        },
      ],
      // ping
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      treesBox: {
        url: 'ZI_CHAN',
        // url: 'yonghu/selectYongHuXiaQuByZc',
        GZKZ: [5, 45],
      }, // tree图的请求地址
      //  1 '已受理 (',当前处理人可看)
      //  2 '待确认',
      //  3 '正常关闭',
      //  4 '驳回',
      //  5 '挂起',
      //  6 '外派',
      //  7 '异常关闭',
      type: ['未生成', '已受理', '待确认', '正常关闭', '驳回', '挂起', '外派'], // 正常和异常关闭不需要
      // zicanOptions: [], // 资产类型
      searchCriteria: {
        typeVal: '', // 设备类型
        // isGZ: '0', // 故障类型
        // dataTime: '', // 报障时间
        namer: '',
      },
      tableData: [],
      wtbmdjs: 1,
      dialogTableVisible: false, // 弹出窗
      activeName: 'videoDetails', // 标签页
      currentPage: 1, // 页码
      total: 0, // 总条数
      pageSize: 10, // 每页显示的条目数
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      tableLoading: true,
      echartData: [], // 饼图数据
      barData: [], // 柱形图数据
      pieFlag: false, // 饼图
      barFlag: false, // 柱形图
      listQuery: {
        sortby: '',
        order: '',
      },
      tableLoad: false, // 表格加载中样式
      detailsDate: {}, // 巡检详情
      historyDate: {}, // 巡检历史
      rowList: {},
      xjMessage: '',
      xjDialogVisible: false,
      tableMessage: '',
      tableTimer: null,
      pieTimer: null,
      barTimer: null,
      reload_pie: false,
      reload_bar: false,
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
      quanxianBtns: {
        btn1: false,
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
    barFlag(newVal, oldVal) {
      this.barTimer = setTimeout(() => {
        if (this.barFlag) {
          this.barFlag = false
          this.reload_bar = true
        }
      }, timeLoad)
    },
  },
  created() {
    // 权限按钮
    this.jurisdictionBtn()
    // this.treeData = JSON.parse(getUrl('xiaquCity'))
    const userId = JSON.parse(getUrl('userconter')).id
    this.initList(userId, 'TJSJ', 'DESC', this.currentPage, this.pageSize, '', '')
    this.initPie()
    // this.initGzlx() // 设备类型
  },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'XJZX_YXJC_LXZK') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'shoudongxunjian') {
              this.quanxianBtns.btn1 = true // 手动巡检
            }
          })
        }
      })
    },
    getzcmc(row) {
      let html = ''
      if (row.lxzt > 1) {
        html = `<span>${row.zcmc}</span>`
      } else {
        html = `<span class="fontColor">${row.zcmc}</span>`
      }
      return html
    },
    getsblx(row) {
      return `<span>${row.zclxmc1 ? row.zclxmc1 + ' / ' : ''}</span>
                <span>${row.zclxmc2 ? row.zclxmc2 + ' / ' : ''}</span>
                <span>${row.zclxmc3}</span>`
    },
    initList(userId, order, sort, M_, N_, zclx, zcmc) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('userId', userId)
      params.append('order', order)
      params.append('sort', sort)
      params.append('M_', M_)
      params.append('N_', N_)
      // params.append('SBLX', zclx || '') // 资产类型ID
      params.append('LXZT', zclx) // 资产类型ID
      params.append('SBMC', zcmc) // 设备名称,IP条件
      this.setList(params)
    },
    // 录像状况列表
    async setList(params) {
      const { data: res } = await this.$http.post(xunJian + 'lxjc/selectLuXiangJianCe', params)
      this.tableLoad = false // 表格加载中样式
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item, index) => {
            item.jcjgList = [] // 存储录像状况列表检测结果
            item.detailsJcjg = [] // 存储录像巡检详情结果
          })
          this.tableData = res.data.list
          jsonstrF(this, res.data.list, 288, 1)
          this.total = res.data.countList
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    // 饼状图/柱状图
    async initPie() {
      clearTimeout(this.pieTimer)
      clearTimeout(this.barTimer)
      this.pieFlag = true
      this.barFlag = true
      const { data: res } = await this.$http.post(xunJian + 'lxjc/selectTBSJ')
      this.pieFlag = false
      this.barFlag = false
      console.log(res)
      switch (res.code) {
        case '0000':
          this.echartData = [
            { value: res.data.ZC_, name: '录像正常' },
            { value: res.data.YC_, name: '录像异常' },
            { value: res.data.WLX_, name: '未录像计划' },
          ]
          this.barData = res.data.WLXSC
          break
        case '0013':
          this.echartData = [
            { value: 0, name: '录像正常' },
            { value: 0, name: '录像异常' },
            { value: 0, name: '未录像计划' },
          ]
          this.barData = [0, 0, 0, 0, 0]
          break
        default:
          this.reload_pie = true
          this.reload_bar = true
          break
      }
    },
    // 柱状图
    // async initBar(data) {
    //   this.barFlag = true
    //   const { data: res } = await this.$http.post(xunJian + 'lxjc/selectTBSJ')
    //   if (res.code === '0014') {
    //     return ''
    //   } else if (res.code !== '0000') {
    //     return this.$message({
    //       type: 'error',
    //       message: res.message,
    //       center: true,
    //     })
    //   }
    //   this.barData = [
    //     { value: res.data.ZC_, name: '录像正常' },
    //     { value: res.data.YC_, name: '录像异常' },
    //   ]
    //   this.barFlag = false
    // },
    // 设备类型
    // async initGzlx() {
    //   const params = new URLSearchParams()
    //   params.append('FLBISNULL', 0)
    //   const { data: res } = await this.$http.post(yeWu + 'wtgzzd/selectWenTiGuZhangZiDian', params)
    //   if (res.code === '0014') {
    //     return ''
    //   } else if (res.code !== '0000') {
    //     return this.$message({
    //       type: 'error',
    //       message: res.message,
    //       center: true
    //     })
    //   }
    //   res.data.list.forEach(item => {
    //     const k = {
    //       value: item.id,
    //       label: item.lbmc
    //     }
    //     this.zicanOptions.push(k)
    //   })
    // },
    refreshPie() {
      this.reload_pie = false
      this.initPie()
    },
    refreshBar() {
      this.reload_bar = false
      this.initPie()
      // this.initBar()
    },
    async treeClick(e) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true // 表格加载中样式
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (e.type.levels === 1) {
        params.append('SF', e.type.label)
      } else if (e.type.levels === 2) {
        params.append('CS', e.type.label)
      } else if (e.type.levels === 3) {
        params.append('QX', e.type.label)
      } else if (e.type.levels === 4) {
        params.append('XZJD', e.type.label)
      }
      params.append('LXZT', this.searchCriteria.typeVal) // 资产类型ID
      params.append('SBMC', this.searchCriteria.namer) // 设备名称,IP条件
      params.append('userId', user.id)
      params.append('order', 'TJSJ')
      params.append('sort', 'desc')
      params.append('M_', 1)
      params.append('N_', 10)
      this.currentPage = 1
      this.pageSize = 10
      this.setList(params)
    },
    onSubmit() {
      this.tableLoad = true // 表格加载中样式
      const userId = JSON.parse(getUrl('userconter')).id
      const zclx = this.searchCriteria.typeVal
      const zcmc = this.searchCriteria.namer
      this.currentPage = 1
      this.pageSize = 10
      this.initList(userId, this.listQuery.sortby, this.listQuery.order, this.currentPage, this.pageSize, zclx, zcmc)
    },
    // 巡检详情界面-点击检测结果或设备名称时候的弹出窗
    findRealPage(row) {
      // 0 正常  1-录像中断(感叹号)  2文件丢失(xx)
      // type=1 手动巡检   type=0详情
      if (row.lxzt === 2) {
        return
      }
      row.xjType = 0
      this.rowList = row
      this.detailsDate = row
      this.historyDate = row
      this.dialogTableVisible = true
      // this.historyDate = []
    },
    // tab栏切换
    handleClick(tab, event) {
      // 标签页事件
      switch (tab.index) {
        case 0: // 录像巡检详情
          // getJc(jsonstr)
          this.detailsDate = this.rowList
          break
        default:
          // 录像巡检历史
          this.historyDate.currentPage = 1
          this.historyDate.pageSize = 10
          this.$refs.historyDatePage.$emit('childMethod', { currentPage: 1, pageSize: 10 })
          break
      }
    },
    dialogClose() {
      // 弹窗关闭标签页重置第一个
      this.activeName = 'videoDetails' // 标签页
      this.detailsDate = {}
      this.historyDate = {}
    },
    handleSizeChange(val) {
      // 选择每页显示多少条数据
      this.tableLoad = true // 表格加载中样式
      this.pageSize = val
      this.currentPage = 1
      const userId = JSON.parse(getUrl('userconter')).id
      const zclx = this.searchCriteria.typeVal
      const zcmc = this.searchCriteria.namer
      this.initList(userId, this.listQuery.sortby, this.listQuery.order, this.currentPage, val, zclx, zcmc)
    },
    handleCurrentChange(val) {
      // 切换页数
      this.tableLoad = true // 表格加载中样式
      this.currentPage = val
      const userId = JSON.parse(getUrl('userconter')).id
      const zclx = this.searchCriteria.typeVal
      const zcmc = this.searchCriteria.namer
      this.initList(userId, this.listQuery.sortby, this.listQuery.order, val, this.pageSize, zclx, zcmc)
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 表格加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      const userId = JSON.parse(getUrl('userconter')).id
      const zclx = this.searchCriteria.typeVal
      const zcmc = this.searchCriteria.namer
      this.initList(userId, this.listQuery.sortby, this.listQuery.order, this.currentPage, this.pageSize, zclx, zcmc)
    },
    getTime(value) {
      var hours = parseInt((value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      var minutes = parseInt((value % (1000 * 60 * 60)) / (1000 * 60))
      var seconds = (value % (1000 * 60)) / 1000
      return hours + '时 ' + minutes + ' 分 ' + seconds + '秒'
    },
    // 手动巡检
    async findRealTime(item) {
      // ip, startDate, endDate
      const starttime = fun_date().currentTime + ' 00:00:00'
      const endtime = fun_date().current
      const params = new URLSearchParams()
      params.append('ip', item.zcip)
      params.append('startDate', starttime)
      params.append('endDate', endtime)
      // params.append('startDate', item.starttime)
      // params.append('endDate', item.endtime)
      const { data: res } = await this.$http.post('/device/replay/findRealTime', params)
      if (res.code !== '0000') {
        this.xjMessage = res.message
        this.xjDialogVisible = true
        return
      }
      const row = JSON.parse(JSON.stringify(item)) // 深拷贝避免更改之前数组
      row.datesign = res.data.dateSign
      if (res.data.timestamp.length > 0) {
        row.jsonstr = JSON.stringify(res.data.timestamp)
      } else {
        row.jsonstr = null
      }
      row.differ = res.data.differ // 未录像时长
      row.starttime = starttime // 开始时间
      row.endtime = endtime // 结束时间
      row.findRealList = getJc(row.jsonstr) // 手动巡检存储检测结果段
      // type=1 手动巡检   type=0详情
      row.xjType = 1
      this.rowList = row
      this.detailsDate = row
      this.historyDate = row
      this.dialogTableVisible = true
    },
    handleClose() {
      this.xjDialogVisible = false
    },
    // ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.zcip
      this.ping.name = val.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    // treeClick(e) {
    //   this.pageSize = 10
    //   this.currentPage = 1
    //   this.onSubmit(1, 10, e.type)
    //   this.xianQu = e.type
    // }
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
.jcjgItem {
  position: absolute;
  // z-index: 99;
  height: 12px;
  background-color: #37ca41;
}
.t {
  height: 100%;
}
.t_container {
  height: 100%;
  .el-col {
    height: 250px;
  }
}
::v-deep .noScroll.el-tabs {
  .el-tabs__nav-scroll {
    width: auto;
    position: static;
    z-index: auto;
    background-color: #fff;
  }
  .el-tabs__nav-scroll::after {
    content: '';
    position: static;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    background-color: #e4e7ed;
    z-index: auto;
  }
}
</style>
